<!--
 * @description:
 * @fileName: DirectorList
 * @author: 17076
 * @date: 2025/3/14-下午3:12
 * @version: V1.0.0
-->

<template>
  <div ref="lensRef" class="lens-content" :style="{ height: $baseTableHeight(-100) + 'px' }">
    <div
      v-for="(item, index) in lensFormatData"
      :key="index"
      :class="['flex-row', 'lens-item']"
    >
      <div class="item-left">
        <p class="flex-row">
          <svg-icon icon-class="drag" class="move" />
          <span style="margin: 0 10px">{{ item['index'] }}</span>
          <span>{{ item.name }}</span>
        </p>
        <p class="flex-row details">
          <span style="min-width: 40px">剧情:</span>
          <span>{{ item['plot'] }}</span>
        </p>
        <p class="flex-row details">
          <span style="min-width: 40px">场景:</span>
          <span>{{ item['scenery'] }}</span>
        </p>
        <p v-if="item['roleName'] && item['roleName'].length > 0" class="flex-row details">
          <span style="min-width: 40px">角色:</span>
          <span>{{ formatterRoleName(item['roleName']) }}<i class="view-dialogue" @click="handleViewDialogue(item)">查看对话</i></span>
        </p>
        <p class="flex-row details">
          <span style="min-width: 40px">描述:</span>
          <span>{{ item['lensDesc'] }}</span>
        </p>
        <p>
          <span>景别: {{ item['shotSizeName'] }}</span>
          <span style="margin-left: 20px">时长: {{ item['lensTimeLength'] }}</span>
        </p>
      </div>
      <!--单图-->
      <div v-if="item['lensFrames'].length === 1" class="item-single-right">
        <div class="flex-column flex-center item-single-image">
          <div v-if="item['lensFrames'][0].fileId" class="item-single-content" :data-ratio="pictureScale">
            <img :src="downloadUrl + item['lensFrames'][0].fileId" class="image-item">
            <el-popover
              v-model="item['lensFrames'][0]['showComment']"
              placement="bottom-end"
              trigger="manual"
              width="300"
              popper-class="comment-popover"
            >
              <div>
                <p>评论</p>
                <div class="flex-row">
                  <span
                    v-for="type in editType"
                    :key="type.code"
                    :class="['type-item', item['lensFrames'][0].commentType === type.code ? 'active' : '', { 'disabled': type.disabled }]"
                    @click.stop="handleTypeClick(item['lensFrames'][0], type)"
                  >{{ type['name'] }}</span>
                </div>
                <el-input v-model="item['lensFrames'][0].commentText" :rows="4" placeholder="请输入" type="textarea" style="margin-top: 10px" />
                <div class="flex-row bottom-button">
                  <div @click="() => { $set(item['lensFrames'][0], 'showComment', false) }">取消</div>
                  <div class="liner-button" @click="handleConfirm(item['lensFrames'][0])">确定</div>
                </div>
              </div>
              <div v-if="playData['createStatus'] !== '6'" slot="reference" class="flex-row flex-center comment" @click.stop="handleComment(item['lensFrames'][0])">
                <svg-icon icon-class="comment" />
              </div>
            </el-popover>
          </div>
          <el-image v-else style="width: 100%; height: 100%">
            <div slot="error" class="flex-column flex-center error-content">
              <i class="el-icon-picture-outline"/>
              <span>暂无图片</span>
            </div>
          </el-image>
        </div>
      </div>
      <!--多图-->
      <div v-else class="item-multi-right">
        <div ref="swiper" class="swiper-container">
          <div class="swiper-wrapper">
            <div v-for="(subItem, subIndex) in item['lensFrames']" :key="subIndex" class="flex-column flex-center swiper-slide">
              <div v-if="subItem.fileId" class="swiper-slide-image" :data-ratio="pictureScale">
                <img :src="downloadUrl + subItem.fileId" class="image-item">
                <el-popover
                  v-model="subItem['showComment']"
                  placement="bottom-end"
                  trigger="manual"
                  width="300"
                  popper-class="comment-popover"
                >
                  <div>
                    <p>评论</p>
                    <div class="flex-row">
                      <span
                        v-for="type in editType"
                        :key="type.code"
                        :class="['type-item', subItem.commentType === type.code ? 'active' : '', { 'disabled': type.disabled }]"
                        @click.stop="handleTypeClick(subItem, type)"
                      >{{ type['name'] }}</span>
                    </div>
                    <el-input v-model="subItem.commentText" type="textarea" :rows="4" placeholder="请输入" style="margin-top: 10px" />
                    <div class="flex-row bottom-button">
                      <div @click="() => { $set(subItem, 'showComment', false) }">取消</div>
                      <div class="liner-button" @click="handleConfirm(subItem)">确定</div>
                    </div>
                  </div>
                  <div v-if="playData['createStatus'] !== '6'" slot="reference" class="flex-row flex-center comment" @click.stop="handleComment(subItem)">
                    <svg-icon icon-class="comment" />
                  </div>
                </el-popover>
              </div>
              <el-image v-else style="width: 100%; height: 100%">
                <div slot="error" class="flex-column flex-center error-content">
                  <i class="el-icon-picture-outline"/>
                  <span>暂无图片</span>
                </div>
              </el-image>
            </div>
          </div>
        </div>
        <div class="navigator">
          <svg-icon v-if="item['lensFrames'] && item['lensFrames'].length > 3" icon-class="pre" :class="'pre-button' + index" />
          <svg-icon v-if="item['lensFrames'] && item['lensFrames'].length > 3" icon-class="next" :class="'next-button' + index" />
          <!--          <el-button @click="handleEdit(item)">编辑</el-button>-->
        </div>
      </div>
    </div>
    <!--查看对话-->
    <preview-dialogue ref="view" />
  </div>
</template>

<script>
import PreviewDialogue from '@/views/creativeCenter/playWriting/components/lens/others/PreviewDialogue.vue'
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
import { baseURL } from '@/config'
import { commonDownloadFile } from '@/api/config/uploadApi'
import { mapGetters } from 'vuex'
import { saveLensFrameComment } from '@/api/director'
export default {
  name: 'DirectorList',
  components: { PreviewDialogue },
  props: {
    playData: {
      type: Object,
      default: () => {}
    },
    lensData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 当前选中的镜头
      selectLensId: null,
      // 修改类型
      editType: JSON.parse(sessionStorage.getItem('commentType')),
      // 图片下载链接
      downloadUrl: baseURL + commonDownloadFile,
      // 去除第一条数据的分镜数据
      lensFormatData: []
    }
  },
  computed: {
    // 分镜数据
    ...mapGetters({
      pictureScale: 'lens/pictureScale'
    })
  },
  watch: {
    lensData: {
      handler(val) {
        if (val && val.length > 0) {
          this.lensFormatData = val.slice(1)
          if (this.lensFormatData.length > 0) {
            this.selectLensId = this.lensFormatData[0].lensId
          }
        }
      },
      immediate: true
    },
    editType: {
      immediate: true,
      handler: function(val) {
        if (val && val.length > 0) {
          val.map(item => {
            if (item.code !== '1') {
              this.$set(item, 'disabled', true)
            }
          })
        }
      }
    }
  },
  mounted() {
    this.initSwiper()
    // 监听界面滑动
    this.$refs.lensRef.addEventListener('scroll', () => {
      this.lensData.forEach(item => {
        if (item['lensFrames'] && item['lensFrames'].length > 0) {
          item['lensFrames'].forEach(lens => {
            this.$set(lens, 'showComment', false)
          })
        }
      })
    })
  },
  beforeDestroy() {
    this.$refs.lensRef.removeEventListener('scroll', null)
  },
  methods: {
    // 评论
    handleComment(item) {
      this.$set(item, 'showComment', true)
    },
    // 修改类型点击
    handleTypeClick(item, type) {
      this.$set(item, 'commentType', type.code)
    },
    // 确定评论
    handleConfirm(item) {
      if (!item['commentType']) {
        this.$baseMessage.error('请选择修改类型')
        return
      } else if (!item['commentText']) {
        this.$baseMessage.error('请输入修改内容')
        return
      }
      this.$baseConfirm('系统已收到您的修改反馈，【确定】后将转交给设计人员修订。', '提示', async() => {
        const { code, msg } = await saveLensFrameComment({ lensFrameId: item.id, commentText: item.commentText, commentType: item.commentType })
        code === 200 ? this.$baseMessage.success(msg || '修改成功') : this.$baseMessage.error(msg || '修改失败')
        this.$emit('refresh')
      })
    },
    // 编辑
    handleEdit(item) {
      this.$emit('edit', item)
    },
    // 查看对话
    handleViewDialogue(item) {
      this.$refs.view.show(item)
    },
    // 格式化角色名称
    formatterRoleName(val) {
      if (!val) return ''
      const strArr = []
      val.forEach(item => {
        strArr.push(item.name)
      })
      return strArr.join('、')
    },
    // 初始化swiper
    initSwiper() {
      this.$nextTick(() => {
        if (!this.$refs.swiper) return
        this.$refs.swiper.forEach((item, index) => {
          new Swiper(item, {
            // 循环模式
            loop: false,
            slidesPerView: 3,
            spaceBetween: 20,
            navigation: {
              nextEl: '.next-button' + index, // 下一页按钮
              prevEl: '.pre-button' + index // 上一页按钮
            }
          })
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.lens-content {
  overflow: auto;
  margin-top: 10px;
  .lens-item {
    background: #1D2129;
    color: $base-color-white;
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 12px;
    box-sizing: border-box;
    align-items: center;
    cursor: pointer;
    .item-left {
      flex: 1;
      .details {
        line-height: 20px;
      }
      .view-dialogue {
        color: $base-color-default;
        cursor: pointer;
        font-style: normal;
        margin-left: 10px;
      }
    }
    .item-single-right {
      width: 300px;
      border-left: 1px solid #39414E;
      padding-left: 20px;
      margin-left: 20px;
      position: relative;
      .item-single-image {
        width: 100%;
        border-radius: 8px;
        background: #39414E;
        overflow: hidden;
        aspect-ratio: $base-aspect-ratio-2;
        .item-single-content {
          max-width: 100%;
          max-height: 100%;
          border-radius: 8px;
          aspect-ratio: $base-aspect-ratio-1;
          &[data-ratio="2"] {
            aspect-ratio: $base-aspect-ratio-2;
          }
          &[data-ratio="3"] {
            aspect-ratio: $base-aspect-ratio-3;
          }
          &[data-ratio="4"] {
            aspect-ratio: $base-aspect-ratio-4;
          }
          &[data-ratio="5"] {
            aspect-ratio: $base-aspect-ratio-5;
          }
          &[data-ratio="6"] {
            aspect-ratio: $base-aspect-ratio-6;
          }
          &[data-ratio="7"] {
            aspect-ratio: $base-aspect-ratio-7;
          }
          &[data-ratio="8"] {
            aspect-ratio: $base-aspect-ratio-8;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .item-multi-right {
      width: 900px;
      border-left: 1px solid #39414E;
      padding-left: 20px;
      margin-left: 20px;
      position: relative;
      .swiper-slide {
        position: relative;
        height: auto;
        background: #272C36;
        border: 1px solid transparent;
        cursor: pointer;
        aspect-ratio: $base-aspect-ratio-2;
        border-radius: 8px;
        .swiper-slide-image {
          max-width: 100%;
          max-height: 100%;
          aspect-ratio: $base-aspect-ratio-1;
          &[data-ratio="2"] {
            aspect-ratio: $base-aspect-ratio-2;
          }
          &[data-ratio="3"] {
            aspect-ratio: $base-aspect-ratio-3;
          }
          &[data-ratio="4"] {
            aspect-ratio: $base-aspect-ratio-4;
          }
          &[data-ratio="5"] {
            aspect-ratio: $base-aspect-ratio-5;
          }
          &[data-ratio="6"] {
            aspect-ratio: $base-aspect-ratio-6;
          }
          &[data-ratio="7"] {
            aspect-ratio: $base-aspect-ratio-7;
          }
          &[data-ratio="8"] {
            aspect-ratio: $base-aspect-ratio-8;
          }
          .image-item {
            width: 100%;
            height: 100%;
            border-radius: 8px;
          }
        }
      }
      .navigator {
        height: 40px;
        line-height: 40px;
        text-align: right;
        margin-top: 10px;
        margin-right: 10px;
        box-sizing: border-box;
        position: relative;
        .svg-icon {
          width: 22px;
          height: 22px;
          cursor: pointer;
          position: absolute;
          bottom: 10px;
          &:nth-child(1) {
            left: 42%;
          }
          &:nth-child(2) {
            right: 42%;
          }
        }
      }
    }
    .comment {
      position: absolute;
      top: 5px;
      right: 5px;
      padding: 5px;
      box-sizing: border-box;
      background: rgba(18, 20, 24, 0.50);
      cursor: pointer;
      border-radius: 3px;
    }
    .image-item {
      width: 100%;
      background: #272C36;
      height: 180px;
      border-radius: 8px;
    }
    //&:hover {
    //  border-color: $base-color-default;
    //}
    //&.active {
    //  border-color: $base-color-default;
    //}
    .opera-button {
      cursor: pointer;
      color: #FFFFFF;
    }
  }
}
::v-deep {
  .type-item {
    background: #272C36;
    border: 1px solid #39414E;
    padding: 10px 0;
    border-radius: 3px;
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
    flex: 1;
    &.active {
      border-color: #FFFFFF;
    }
    &.disabled {
      color: #686B7A;
      border-color: #39414E;
      cursor: not-allowed;
    }
  }

}
</style>
